<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>
        <p></p>
        <p></p>
    </h1>
    <h2>
        <div></div>
    </h2>

    <div>
        <div>
            <li></li>
            <li></li>
            <li></li>
        </div>
    </div>
    <script>
        const doc = document.querySelectorAll('*')
        console.log(doc);

        let res = [...doc]
            .map(x => x.tagName)
            .reduce((babelCount, tag) => {
                babelCount[tag] = babelCount[tag] ? babelCount[tag] + 1 : 1;
                return babelCount
            }, {});
        console.log(res);
        var babel = '';
        var count = 0;
        for (let [key, val] of Object.entries(res)) {
            if (val > count) {
                babel = key;
                count = val;
            }
        }
        console.log(babel + "----" + count);

        const maxBy = (list, keyBy) => list.reduce((x, y) => keyBy(x) > keyBy(y) ? x : y)

        var res = function getFrequentTag() {
            const tags = [...document.querySelectorAll('*')].map(x => x.tagName).reduce((o, tag) => {
                o[tag] = o[tag] ? o[tag] + 1 : 1;
                return o
            }, {});
            console.log(Object.entries(tags));
            return maxBy(Object.entries(tags), tag => tag[1])
        }
        console.log(res());
    </script>
</body>

</html>